<template>
  <div
    class="center"
    @dragenter="handleDragOver"
    @dragover="handleDragOver"
    @drop="handleDrop"
  >
    <Canvas />
  </div>
</template>

<script lang="ts" setup>
import useEditorStore from "@/store/modules/editor";
import {
  createComponentConfig,
  componentInstall,
  configComponentInstall,
} from "@/materials";
import Canvas from "./components/canvas/index.vue";

defineOptions({
  name: "Center",
});

const handleDragOver = (event: DragEvent) => {
  // 网页或应用程序的大多数区域都不能放置拖拽数据，想要可以放置：
  // 必须取消 dragenter 和 dragover 事件来阻止默认的处理
  event.preventDefault();
};

const editorStore = useEditorStore();

// 拖拽完成事件回调
const handleDrop = async (event: DragEvent) => {
  const data = event.dataTransfer!.getData("application/json");
  // 内部还有拖拽排序功能，这个拖拽功能不会传递数据，return
  if (!data) return;
  const config = JSON.parse(data);
  // 1. 创建组件配置
  const componentConfig = await createComponentConfig(config);
  // 2. 对组件全局注册
  await componentInstall(config); // 中间canvas要渲染组件
  await configComponentInstall(config); // 右边props要渲染的组件
  // 3. 保存组件配置（pinia）
  editorStore.addComponent(componentConfig);
  // 4. 更新当前组件id（这个组件就会被选中）
  editorStore.setCurrentComponentId(componentConfig.id);
};
</script>

<style scoped lang="scss">
.center {
  background-color: #fff;
  height: 100%;
}
</style>
